<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>1号店- 首页</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <!-- 顶部导航开始 -->
    <div class="header">
      <div class="wrap">
        <div class="login">
          Hi，请<a href="https://gitee.com/crocodile-auntie/java-code">登录</a>
          / <a href="https://gitee.com/crocodile-auntie/java-code">注册</a>
        </div>
        <ul class="nav">
          <li>
            <a href="#">我的1号店<i></i></a>
          </li>
          <li class="sep">|</li>
          <li>
            <a href="https://gitee.com/crocodile-auntie/java-code"
              >收藏夹<i></i
            ></a>
          </li>
          <li class="sep">|</li>
          <li class="phone">
            <a href="#">掌上1号店<i></i></a>
          </li>
          <li class="sep">|</li>
          <li class="service">
            <a href="https://gitee.com/crocodile-auntie/java-code"
              >客户服务<i></i
            ></a>
            <ul class="menu">
              <li>
                <a href="https://gitee.com/crocodile-auntie/java-code"
                  >包裹跟踪</a
                >
              </li>
              <li>
                <a href="https://gitee.com/crocodile-auntie/java-code"
                  >常见问题</a
                >
              </li>
              <li>
                <a href="https://gitee.com/crocodile-auntie/java-code"
                  >在线投诉</a
                >
              </li>
              <li>
                <a href="https://gitee.com/crocodile-auntie/java-code"
                  >配送范围</a
                >
              </li>
            </ul>
          </li>
          <li class="sep">|</li>
          <li>
            <a href="https://gitee.com/crocodile-auntie/java-code"
              >网站导航<i></i
            ></a>
          </li>
          <li class="sep">|</li>
          <li>
            <a href="https://gitee.com/crocodile-auntie/java-code"
              >关于我们<i></i
            ></a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 顶部导航结束 -->

    <!-- LOgo及搜索部分开始 -->
    <div class="search wrap">
      <img src="images/logo.png" alt="" />
      <div class="form">
        <form action="">
          <label>商品</label>
          <input type="text" placeholder="请输入关键字" />
          <button>搜索</button>
        </form>
        <p>
          <a href="#">毛巾</a>
          <a href="#">卫生纸</a>
          <a href="#">电池</a>
          <a href="#">洗发露</a>
          <a href="#">衣服</a>
          <a href="#">鞋子</a>
        </p>
      </div>
    </div>
    <!-- LOgo及搜索部分结束 -->
    <!-- 主导航部分开始 -->
    <div class="main-nav wrap">
      <div>所有商品分类</div>
      <ul>
        <li class="active"><a href="#">首页</a></li>
        <li class="active"><a href="#">自营</a></li>
        <li class="active"><a href="#">1号团</a></li>
        <li><a href="#">1号商城</a></li>
        <li><a href="#">闪购</a></li>
        <li><a href="#">活色生鲜</a></li>
        <li><a href="#">医药</a></li>
        <li><a href="#">1号钱包</a></li>
      </ul>
    </div>
    <!-- 主导航部分结束 -->

    <!-- 分类导航和轮播部分开始 -->
    <div class="banner">
      <div class="wrap">
        <ul class="cate-nav">
          <li><a href="#">进口食品、生鲜</a><i></i></li>
          <li><a href="#">食品、饮料、酒</a><i></i></li>
          <li><a href="#">母婴、玩具、童装</a><i></i></li>
          <li><a href="#">家居、家庭清洁、纸品</a><i></i></li>
          <li><a href="#">美妆、个人护理、洗护</a><i></i></li>
          <li><a href="#">女装、内衣、中老年</a><i></i></li>
          <li><a href="#">鞋靴、箱包、腕表配饰</a><i></i></li>
          <li><a href="#">男装、户外、户外健身</a><i></i></li>
          <li><a href="#">手机、数码、电脑办公</a><i></i></li>
          <li><a href="#">小家电、大家电、汽车</a><i></i></li>
          <li><a href="#">保健滋补、医药、成人</a><i></i></li>
          <li><a href="#">礼品、卡、旅游、充值</a><i></i></li>
        </ul>
        <div class="carousel">
          <img src="images/banner.jpg" alt="" />
          <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div class="shequ">
          <ul class="top">
            <li>
              <a href="#">
                <img src="images/1.jpg" alt="" />
                <p>0元试用</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="images/3.jpg" alt="" />
                <p>会员俱乐部</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="images/3.jpg" alt="" />
                <p>礼品卡</p>
              </a>
            </li>
          </ul>
          <ul class="news">
            <li>【社区】当红明星教你送七夕情人礼！</li>
            <li>【社区】全球口碑姨妈巾都在这了！</li>
            <li>【促销】V3会员 甜蜜 免费领</li>
          </ul>
          <ul class="tab">
            <li class="active">话费快充</li>
            <li>彩票</li>
            <li>网游卡点</li>
          </ul>
          <form action="">
            <p><label>手机号码：</label><input type="text" /></p>
            <p>
              <label>面值:</label>
              <select>
                <option value="10">￥10</option>
                <option value="20">￥20</option>
                <option value="50">￥50</option>
              </select>
            </p>
            <p><label>售价：</label>￥10.14</p>
            <p><button>立即充值</button></p>
          </form>
        </div>
      </div>
    </div>
    <!-- 分类导航和轮播部分结束 -->
    <!-- 商品列表-食品饮料开始 -->
    <div class="food wrap">
      <div class="title">
        <h3>食品饮料</h3>
        <div>
          <a href="#">咖啡</a> | <a href="#">休闲零食</a> |
          <a href="#">饼干糕点</a> | <a href="#">啤酒</a> |
          <a href="#">粮油米面</a>
        </div>
      </div>
      <div class="products">
        <div class="c1">
          <ul>
            <li>饼干糕点</li>
            <li>休闲零食</li>
            <li>饮料果汁</li>
            <li>牛奶乳品</li>
            <li>冲饮谷物</li>
            <li>营养保健</li>
          </ul>
          <div class="ban">
            <h4>banner</h4>
            <p>banner</p>
          </div>
          <div class="">
            <img src="images/sec1.jpg" alt="" />
          </div>
        </div>
        <div class="c2">
          <img src="images/sec1-1.jpg" alt="" />
          <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div class="c3">
          <div class="product h180">
            <h3>吃货天堂</h3>
            <p>满49减10</p>
            <img src="images/sec1-2.jpg" alt="" />
          </div>
          <div class="product h180">
            <h3>1号酒窖</h3>
            <p>百威哈啤酒两件7折</p>
            <img src="images/sec1-3.jpg" alt="" />
          </div>
        </div>
        <div class="c4">
          <div class="product h360">
            <h3>夏季美食嘉年华</h3>
            <p>粮油1元抢；爆款5折起</p>
            <img src="images/sec1-4.jpg" alt="" />
          </div>
        </div>
        <div class="c5">
          <div class="product h180">
            <h3>饮料饮品</h3>
            <p>爆款满99减25</p>
            <img src="images/sec1-5.jpg" alt="" />
          </div>
          <div class="product h180">
            <h3>甜蜜蜜七夕好礼</h3>
            <p>燕窝 买一送一</p>
            <img src="images/sec1-6.jpg" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 商品列表-食品饮料结束 -->
  </body>
</html>
